<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script src="{{ url_for('static',filename='js/main.js') }}"></script>
</head>

<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/doctorLeftNav')
			</script>

		<div class="righthtml">
			<div class="mine_top">
				<div class="mine_top_left"><img src="{{ url_for('static',filename='image/doctorHead.jpg') }}" class="image" style="vertical-align: unset;"></div>
				<div class="mine_top_right" >
					<h2 style="margin-top: 45px;">{{name}}</h2><p>ID:{{id}}</p>
					<!--<p>todo&nbsp; todo</p>-->
				</div>
				<div class="mine_top_zhenright"><button type="button"  onclick="logout();" class="btn btn-info">Logout</button></div>
			</div>
			<div class="mine_center">
				<div class="mine_center_left">
					<div class="center_left_bottom">
						<table class="table table-striped">
							<caption><center>Supervised Patients</center></caption>
							<thead class="thead-dark">
								<tr>
								<th scope="col">Patient ID</th>
								<th scope="col">NAME</th>
								<th scope="col">Gender</th>
								<th scope="col">Born Date</th>
								<th scope="col">Operation</th>

								</tr>
							</thead>
							<tbody>
								{% for row in data %}
								<tr>
									<!-- <td>{{row}}</td> -->
									<td>{{ row[0] }}</td>
									<td>{{ row[1] }}</td>
									<td>{{ row[2] }}</td>
									<td>{{ row[3] }}</td>
									<td><button onclick="editmedication({{row[0]}},'{{row[1]}}')">Manage</button></td>
								</tr>
								{% endfor %}
							</tbody>

							
    					</table>
					</div>
				</div>
				<div class="mine_center_right" id ="mcr"  hidden="hidden">
					<table class="table table-striped">
                        <caption><center>Medication Management</center></caption>
                        <span style="margin-left: 10px;margin-top: 12px;">Patient ID:</span><span id="pid" > </span>
                        <span style="margin-left: 10px;margin-top: 12px;">NAME:</span><span id="pname" > </span>
                        <button onclick="addm()" type="button" class="btn btn-danger" style="float: right;margin-right: 10px;margin-top: 10px;">Add</button>
                    </br>
                        <span style="margin-left: 10px;margin-top: 12px;">E-mail:</span><span id="email" > </span>
                        <span style="margin-left: 10px;margin-top: 12px;">TEL:</span><span id="tel" > </span>

                        <thead class="thead-dark">
                            <tr>
                            <th scope="col">Medication</th>
                            <th scope="col">Take Time</th>
                            <th scope="col">Operation</th>

                            </tr>
                        </thead>
                        <tbody id="mbody">
                        </tbody>

                        
                    </table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="editMecationModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="createFileTitle">Modify Medication</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="editMedication" class="col-form-label">Medicine</label>
                  <input type="text" autofocus class="form-control" id="editMedication">
                  <label for="editTakeTime" class="col-form-label">Time Of Taking</label>
                  <input type="text" autofocus class="form-control" id="editTakeTime">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="submitEdit">Submit</button>
              <button type="button" class="btn btn-danger" id="cancelEdit">Cancel</button>
            </div>
          </div>
        </div>
      </div>
      
</body>
<script>

var tempPatientId=''
var tempPatientName=''
var tempMedicationName =''
var tempMedicationId=''
var modalType = ''
var ppid = ''

    function logout(){
        $.ajax({
                url: "/Doctor/logout", 
                type: "POST",  
                data: {
                },
                success: function (result) {
                    if (result.message == "success!") {
                    
                        alert("Logout！");
                        location.href="/Login/";
                    }
                    else {
                        alert(result.message)
                    }
                }
            });
    }

    function editmedication(id,name){
        tempPatientId = id
        tempPatientName = name
        $.ajax({
                url: "/Doctor/instruction", 
                type: "POST",  
                data: {"id": id
                },
                success: function (result) {
                    if (result.message == "success!") {
                        $("#mbody").empty()
                        $('#pid').text(id)
                        $('#pname').text(name)
                        $('#email').text(result.comm[0][0])
                        $('#tel').text(result.comm[0][1])

                        for(i=0;i<result.data.length;i++){
                            addtableitem(id,result.data[i], name)
                        }
                        //display mbody
                        $("#mcr").hide

                        var mcr=document.getElementById("mcr");
                        //mcr.setAttribute("hidden",false);
                        mcr.removeAttribute("hidden");
                    }
                    else {
                        alert(result.message)
                    }
                }
            });
    }

    function addtableitem(pid,item, pname){
        tempPatientId = pid
        //item[0]：药品记录id  item[1]：药品名字 item[2]：吃药时间  name:病人名字
        $("#mbody").append("<tr><td>"+ item[1] +"</td><td>"+item[2] +"</td>"+
            "<td><button style=\" padding:0px; margin:2px;\" onclick=\"modify("+pid +","+item[0]+",'"+pname+"')\">Modify</button>"+
                "<button style=\" padding:0px; margin:2px;\" onclick=\"deletem("+pid +","+item[0]+",'"+pname+"')\">Delete</button></td></tr>")
    }

    function modify(pid,mid,pname){
        tempMedicationId = mid
        tempPatientName =pname
        tempPatientId =pid
        modalType = "modify"
        ShowCreateModal()
    }
    function deletem(pid,mid,pname){
        $.ajax({
                url: "/Doctor/deletem", 
                type: "POST",  
                data: {"id":mid
                },
                success: function (result) {
                    if (result.message == "success!") {
                    
                        //alert("delete success！");
                        //editmedication(id,name); 错的，这里的id时药品的id,不是病人的id,搞混了

                        editmedication(pid,pname);
                    }
                    else {
                        alert(result.message)
                    }
                }
            });
    }


    // 修改弹出框的title, 显示弹框
    function ShowCreateModal(){
        $("#createFileTitle").text('Edit Medication');
        $('#editMecationModal').modal('show');
    }
    // 关闭弹框， 获取输入值，然后执行逻辑
    $("#submitEdit").click(function (){
        $("#editMecationModal").modal("hide");
        var inputEditMedication = $("#editMedication").val();
        var inputEditTakeTime = $("#editTakeTime").val();
        console.log(inputEditMedication+" , " + inputEditTakeTime);

        if (modalType == "modify"){
            modifymodal(inputEditMedication, inputEditTakeTime)
        }
        if (modalType == "add"){
            addmodal(inputEditMedication, inputEditTakeTime)
        }
        $("#editMedication").val('')
        $("#editTakeTime").val('')
        

    });
    $("#cancelEdit").click(function (){
        $("#editMecationModal").modal("hide");
    });
    
    function addm(){
        modalType = "add"
        ShowCreateModal()
    }

    function modifymodal(inputEditMedication, inputEditTakeTime){
        $.ajax({
                    url: "/Doctor/modifym", 
                    type: "POST",  
                    data: {"id":tempMedicationId,
                    'name':inputEditMedication,
                    'time':inputEditTakeTime
                    },
                    success: function (result) {
                        if (result.message == "success!") {
                            alert("Modify medication success！");
                            editmedication(tempPatientId,tempPatientName);
                        }
                        else {
                            alert(result.message)
                        }
                    }
                });
    }

    function addmodal(inputEditMedication, inputEditTakeTime){
        console.log("tempPatientId:",tempPatientId)
        $.ajax({
                    url: "/Doctor/addm", 
                    type: "POST",  
                    data: {"id":tempPatientId,
                    'name':inputEditMedication,
                    'time':inputEditTakeTime
                    },
                    success: function (result) {
                        if (result.message == "success!") {
                            alert("Add medication success！");
                            editmedication(tempPatientId,tempPatientName);
                        }
                        else {
                            alert(result.message)
                        }
                    }
                });
    }

</script>

</html>